<template>
    <div class="brand-wrapper">
        <!--      查询表单 -->
        <div class="search-form">
            <el-form class="demo-form-inline" size="mini">
                <el-row>
                    <el-col span="8">
                        <el-form-item label="返厂出库单号">
                            <el-input placeholder="请输入单号" v-model="searchParams.number" style="width: 65%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item label="返厂出库标志">
                            <el-select v-model="searchParams.outSignId" clearable placeholder="请选择">
                                <el-option
                                        v-for="(key,value) in outSignList"
                                        :label="key"
                                        :value="value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="8">
                        <el-form-item label="制单人">
                            <el-input placeholder="请输入制单人" v-model="searchParams.establishId"
                                      style="width: 70%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item label="制单时间">
                            <el-date-picker
                                    style="width: 240px"
                                    type="datetimerange"
                                    :picker-options="dateOptions.pickerOptions"
                                    v-model="startDate1"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="-"
                                    @change="chooseTime1"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="left">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item label="审批时间">
                            <el-date-picker
                                    style="width: 240px"
                                    type="datetimerange"
                                    :picker-options="dateOptions.pickerOptions"
                                    v-model="startDate"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="-"
                                    @change="chooseTime"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="left">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="searchPage">查询</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--    表格数据-->
        <div class="data-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="selectChange">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品串码">
                                <span>{{ props.row.snCode }}</span>
                            </el-form-item>
                            <el-form-item label="返厂原因">
                                <span>{{ props.row.reason }}</span>
                            </el-form-item>
                            <el-form-item label="返厂地点">
                                <span>{{ props.row.place }}</span>
                            </el-form-item>
                            <el-form-item label="外观状态">
                                <span>{{ props.row.appearance }}</span>
                            </el-form-item>
                            <el-form-item label="审批意见">
                                <span>{{ props.row.opinion }}</span>
                            </el-form-item>
                            <el-form-item label="备注">
                                <span>{{ props.row.remarks }}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="number"
                        label="返厂出库单号"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="enterSignName"
                        label="返厂出库标志"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="establishId"
                        label="制单人"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="establishTime"
                        label="制单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="approverId"
                        label="审批人"
                        width="100">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="操作">
                    <template v-slot="hanjie">
                        <el-button type="primary" size="mini"
                                   @click="dialogVisible=true,formData.id=hanjie.row.id ">审核

                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>


        <!--    分页-->
        <div class="page-box">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="searchParams.pageSize"
                    :current-page="searchParams.currentPage"
                    @current-change="currentPageChange"
            >
            </el-pagination>

        </div>


        <!--弹框-->
        <el-dialog
                title="操作"
                :visible.sync="dialogVisible"
                width="33%"
        >
            <el-form ref="form" label-width="80px" size="small">
                <el-form-item label="审批意见">
                    <el-input v-model="formData.opinion"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formData.remarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" size="mini" @click="dialogVisible = false,notadopt()">不通过</el-button>
        <el-button type="primary" size="mini" @click="dialogVisible = false,adopt()">通 过</el-button>
  </span>
        </el-dialog>
    </div>
</template>
<script>
    import brand from "./index";
    export default brand;
</script>
<!--src 引用css样式-->
<style src="./index.scss" lang="scss"></style>